<template>
  <div id="app">
    <v-app>
      <!-- <v-navigation-drawer app>
      </v-navigation-drawer> -->

      <v-app-bar app>
        <div class="flex items-center">
          <i style="font-size: 32px; color: #5cb6ff" class="el-icon-s-home ms-4 cursor-pointer"></i>
          <el-breadcrumb class="ms-4" separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="apiStore.projectId">{{
              apiStore.projectName
            }}</el-breadcrumb-item>
          </el-breadcrumb>


          <div v-if="$route.path !== '/login'" class="ms-16 me-auto">
            <el-menu router :default-active="menuStore.activeIndex" style="background-color: transparent;" mode="horizontal">
              <el-menu-item index="/redmine">Redmine</el-menu-item>
              <!-- <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                  <template slot="title">选项4</template>
                  <el-menu-item index="2-4-1">选项1</el-menu-item>
                  <el-menu-item index="2-4-2">选项2</el-menu-item>
                  <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="3" disabled>消息中心</el-menu-item>
              <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
            </el-menu>
          </div>

          <div v-if="apiStore.projectId" @click="apiStore.refresh" class="ms-auto me-3 cursor-pointer">
            <i class="el-icon-refresh-left"></i>
          </div>
          <div class="me-2">
            <div class="flex" v-if="apiStore.projectId">
              <el-select class="shrink-0" size="small" style="width: 240px" v-model="apiStore.envId"
                @change="apiStore.fetchProjectEnvOne">
                <el-option v-for="item in apiStore.envOptionList" :key="item.name" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
              <div @click="layoutStore.toggleEnv" style="height: 32px; width: 32px; line-height: 32px;"
                class="hover:border-slate-300 box-border border cursor-pointer shrink-0 text-center">
                <i class="el-icon-more-outline"></i>
              </div>
            </div>
          </div>
        </div>
      </v-app-bar>

      <!-- 根据应用组件来调整你的内容 -->
      <v-main>
        <!-- 给应用提供合适的间距 -->
        <v-container fluid style="height: calc(100vh - 64px); background-color: #eceef2; padding: 0px;">
          <!-- 如果使用 vue-router -->
          <keep-alive :include="['index']">
            <router-view></router-view>
          </keep-alive>
        </v-container>
      </v-main>

      <!-- <v-footer app>
      </v-footer> -->
    </v-app>
  </div>
</template>

<script>
import { useApiStore } from "@/store/api";
import { useLayoutStore } from "@/store/layout";
import { useMenuStore } from "./store/menu";
import { watch } from "@vue/composition-api";
export default {
  setup() {
    const apiStore = useApiStore();
    const layoutStore = useLayoutStore()
    const menuStore = useMenuStore()

    

    return {
      apiStore,
      layoutStore,
      menuStore
    };
  },
  watch: {
    '$route': {
      handler(val) {
        this.menuStore.activeIndex = val.path
      }
    }
  }
};
</script>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  display: flow-root;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
}

.loading {
  position: relative;
}

.loading::after {
  content: "loading...";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  background-color: grey;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  color: rgb(0, 0, 238);
}

a:visited {
  color: rgb(0, 0, 238);
}

.box-sizing-border {
  box-sizing: border-box;
}

.main-container {
  padding: 20px;
}

svg {
  display: inline-block;
}

/* @media screen and (max-width: 768px) {
    .main-container {
        left: 0;
        margin-left: 0;
    }
} */
</style>